---
title: Tailwind CSS Rating - Components Library @David UI
description: Enable user feedback with Tailwind CSS rating components. Interactive, customizable designs fit seamlessly into any app or review system.
github: rating
prev: docs/react/button-group
next: docs/react/icon-button
---

# Tailwind CSS Rating

Let users rate content with the rating component in David UI. Tailwind CSS makes it responsive and easy to style for different applications.

The rating uses visual elements such as stars, hearts, or numerical scales. It is perfect for e-commerce platforms, review sites, and applications to gather user sentiment or preferences.

Explore examples to implement interactive rating systems in your Tailwind CSS designs.

---

## Rating Demo

This example showcases how filled stars can be rendered with `fill="currentColor"` and styled using the Tailwind class `text-yellow-700`, giving them a yellow hue. This color is widely recognized as a standard for depicting positive or high ratings.


<PreviewWithCode relativePath="rating/rating-demo.tsx" language="html" />

---

## Rating Colors

Explore how to apply various colors—such as amber, blue, green, and red—to a rating component, providing visual diversity to the rating display.

<PreviewWithCode relativePath="rating/rating-colors.tsx" language="html" />

---

## Readonly Rating

This readonly rating system uses SVG icons styled with Tailwind classes to display a 5-star scale, where four stars are filled, and one is outlined.

<PreviewWithCode relativePath="rating/readonly-rating.tsx" language="html" />

---

## Custom Rating Icon

Learn how to design custom rating components using distinctive icons, like hearts, to visually communicate affection, preferences, or satisfaction levels.

<PreviewWithCode relativePath="rating/custom-rating-icon.tsx" language="html" />

---

## Rating with Text

This example illustrates combining graphical elements with numerical data to represent ratings and reviews. This method provides additional context by showing how individual reviews contribute to the overall score.

<PreviewWithCode relativePath="rating/rating-with-text.tsx" language="html" />

---

## Rating with Comment

This example highlights a testimonial section, featuring a customer’s quote, photo, name, position, and corresponding star rating for a comprehensive presentation.

<PreviewWithCode relativePath="rating/rating-with-comment.tsx" language="html" />

---

